<section>
  <h5 class="text-muted">Standard: Single Select Append To Body</h5>
  <div class="row">
    <div class="col-md-5">
      <d-tree-select
        placeholder="Standard Input"
        [treeData]="data1"
        [expandTree]="true"
        [(ngModel)]="value1"
        (ngModelChange)="showSelected($event)"
        appendTo="body"
        style="width: 280px;"
      ></d-tree-select>
    </div>
  </div>
  <h5 class="text-muted" style="margin-top: 20px;">
    Standard: Multiple Select Append To Body
  </h5>
  <div class="row">
    <div class="col-md-5">
      <d-tree-select
        placeholder="Standard Input"
        [treeData]="data2"
        [multiple]="true"
        [expandTree]="true"
        [(ngModel)]="value2"
        (ngModelChange)="showSelected($event)"
        appendTo="body"
        style="width: 280px;"
      ></d-tree-select>
    </div>
  </div>
  <h5 class="text-muted">Custom Width: Single Select Append To Body</h5>
  <div class="row">
    <div class="col-md-5">
      <d-tree-select
        placeholder="Standard Input"
        [treeData]="data1"
        [expandTree]="true"
        [(ngModel)]="value1"
        (ngModelChange)="showSelected($event)"
        width="280px"
        appendTo="body"
        style="width: 280px;"
      ></d-tree-select>
    </div>
  </div>
  <h5 class="text-muted">In modal Append To Modal</h5>
  <div class="row">
    <div class="col-md-5">
      <d-button bsStyle="primary" (btnClick)="openModal()">click me!</d-button>
    </div>
  </div>
</section>
